<template>
   <div class="observerLibrary-increase">
        <!-- 新增弹窗 -->
        <a-modal
         :visible="visibleShow"
         :title="addEditParameter.id?'编辑':'新增'"
         :maskClosable="false"
         @ok="handleOk"
         :confirmLoading="confirmLoading"
         @cancel="closeVisible">
            <a-spin size="large" :spinning="spinning">
                <a-form v-if="visibleShow" :form="form" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                    <a-form-item label="节点名称">
                           <a-input
                           placeholder="请输入节点名称"
                           v-decorator="[
                              'fjdmc', { initialValue:formState.fjdmc, rules: rules.fjdmc}
                           ]"/>
                    </a-form-item>
                    <a-form-item label="页面路径">
                           <a-input
                           @click="pageVisible = true"

                           v-model="formState.fymid"
                           placeholder="请输入页面路径"/>
                                                      <!-- <a-input
                           @click="pageVisible = true"
                           placeholder="请输入页面路径"
                           v-decorator="[
                              'fymid', { initialValue:formState.fymid, rules: rules.fymid}
                           ]"/> -->
                    </a-form-item>
                    <a-form-item label="办理方式">
                      <a-select
                          v-decorator="[
                              'fblfs', { initialValue:formState.fblfs, rules: rules.fblfs}
                           ]">
                            <a-select-option value="多人竞争">
                              多人竞争
                            </a-select-option>
                            <a-select-option value="多人并行">
                              多人并行
                            </a-select-option>
                            <a-select-option value="多人线性">
                              多人线性
                            </a-select-option>
                        </a-select>
                     </a-form-item>
                     <a-form-item label="是否从结点配置获取待办人">
                          <a-select
                          @change="fsfcjdpzhqChange"
                          v-decorator="[
                              'fsfcjdpzhq', { initialValue:formState.fsfcjdpzhq, rules: rules.fsfcjdpzhq}
                           ]">
                            <a-select-option value="0">
                              是
                            </a-select-option>
                            <a-select-option value="1">
                              否
                            </a-select-option>
                          </a-select>
                     </a-form-item>
                     <div v-if="isCheckMan">
                     <a-form-item label="是否指定办理人">
                          <a-select
                              v-decorator="[
                                  'fsfzdblr', { initialValue:formState.fsfzdblr, rules: rules.fsfzdblr}
                              ]"
                              @change="dblrChange">
                            <a-select-option value="0">
                              是
                            </a-select-option>
                            <a-select-option value="1">
                              否
                            </a-select-option>
                          </a-select>
                     </a-form-item>
                     <a-form-item v-if="isZdblr" label="办理人">
                           <a-input
                           placeholder="请选择办理人"
                           v-model="formState.fblr"
                           v-decorator="[
                              'fblr', { initialValue:formState.fblr, rules: rules.fblr}
                           ]"
                           @click="checkMan('fblrid',formState.fblrid)"/>
                     </a-form-item>
                    </div>
                     <div v-if="isBumen">
                        <a-form-item label="是否指定登录人为办理人">
                            <a-select
                                v-decorator="[
                                    'fsfzddlr', { initialValue:formState.fsfzddlr, rules: rules.fsfzddlr}
                                ]"
                                @change="fsfzddlrChange"
                                >
                                <a-select-option value="0">
                                是
                                </a-select-option>
                                <a-select-option value="1">
                                否
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item v-if="isFsfzddlr" label="办理岗位">
                          <a-select
                            mode="multiple"
                            v-model="formState.fblgwid"
                            @change="fblgwidChange"
                          >
                            <a-select-option v-for="(item,i) in jobList" :key="i" :value="item.id">
                              {{ item.jobName }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                        <a-form-item v-if="isFsfzddlr" label="办理部门类型">
                                <a-select
                                  v-decorator="[
                                      'fblbmlx', { initialValue:formState.fblbmlx, rules: rules.fblbmlx}
                                  ]"
                                  @change="fblbmlxChange">
                                <a-select-option value="指定">
                                  指定
                                </a-select-option>
                                <a-select-option value="不指定">
                                  不指定
                                </a-select-option>
                                <a-select-option value="当前部门">
                                  当前部门
                                </a-select-option>
                              </a-select>
                        </a-form-item>
                        <a-form-item v-if="isFblbmid" label="办理部门">
                            <a-select
                              mode="multiple"
                              v-decorator="[
                                  'fblbmid', { initialValue:formState.fblbmid, rules: rules.fblbmid}
                              ]">
                                <a-select-option v-for="(item,i) in departList" :key="i" :value="item.id">
                                  {{ item.orgName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                      </div>
                     <a-form-item label="序号">
                           <a-input-number
                           placeholder=""
                           v-decorator="[
                              'fxh', { initialValue:formState.fxh, rules: rules.fxh}
                           ]"/>
                     </a-form-item>
                </a-form>
            </a-spin>
        </a-modal>
      <personnelList ref="personnelList" :modaObj="modaObj" @checkPersonnel="checkPersonnel"></personnelList>
      <a-drawer
        title="页面路径表"
        :width="720"
        :visible="pageVisible"
        :body-style="{ paddingBottom: '80px' }"
        @close="closePageVisible"
      >
      <commpVxeTable
        :isCanWrap="true"
        :key="selectTemplateKey"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        ref="administrativeOffice"
        @radioChange="selectTemplateChange"
        >
      </commpVxeTable>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'left',
          zIndex: 1,
        }"
      >
          <a-button type="primary" class="blue-btn" @click="closePageVisible">
            确定
          </a-button>
        </div>
      </a-drawer>
    </div>
</template>

<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import personnelList from '../administrativeOffice-new/modal/personnelList.vue'
import {add,editJd,getDepart,getJob,getZxzy,} from './service/index'
export default {
   components: {
      personnelList,
      commpVxeTable
   },
   props: {
      addEditParameter:{
         type:Object,
         default:[]
      }
   },
   data (){
      return {
         spinning: false,
         visibleShow: false,
         confirmLoading: false,
         submittedSuccessfully: false,
         form: this.$form.createForm(this, { name: 'coordinated' }),
         formState: {},
         rules:{
                fymid: [{
                    required: true,
                    message: '请输入页面路径',
                    trigger: 'blur',
                }],
                fblbmid: [{
                    type:'array',
                    required: true,
                    message: '请输入办理部门',
                    trigger: 'blur',
                }],
                fblbmlx: [{
                    required: true,
                    message: '请输入办理部门类型',
                    trigger: 'blur',
                }],
                fblfs: [{
                    required: true,
                    message: '请输入办理方式',
                    trigger: 'change',
                }],
                fblgwid: [{
                    type:'array',
                    required: true,
                    message: '请输入办理岗位',
                    trigger: 'blur',
                }],
                fjdmc: [{
                    required: true,
                    message: '请输入节点名称',
                    trigger: 'blur',
                }],
                fsfcjdpzhq: [{
                    required: true,
                    message: '请选择是否从结点配置获取待办人',
                    trigger: 'change',
                }],
                fsfzdblr: [{
                    required: true,
                    message: '请选择是否指定办理人',
                    trigger: 'change',
                }],
                fblr: [{
                    required: true,
                    message: '请选择办理人',
                    trigger: 'blur',
                }],
                fsfzddlr: [{
                    required: true,
                    message: '请选择是否指定登陆人',
                    trigger: 'change',
                }],
         },
         departList: [],
         jobList: [],
         zxzyList: [],
         isZdblr: false,
         isFsfzdblr: false,
         isBumen: false,
         isCheckMan: false,
         isFblbmid: false,
         isFsfzddlr: true,
         fblr: '',
        modaObj: {},
        //---
        pageVisible: false,
        selectTemplateKey:null,
        dataTableConfig: {
          api: assessCheckApi.pageList,
          rowId: 'id',
          urlType: true,
          paramet: {}
        },
        columnsVxe:[
          {
            type: 'radio',
            width: 60,
            fixed: 'left'
          },{
            title: '序号',
            field: 'fxh',
            width: 50,
          },{
            title: '页面名称',
            field: 'fymmc',
          },{
            title: '页面地址',
            field: 'fymdz',
          },{
            title: '业务类型',
            field: 'fywlx',
          },
        ],
        formItem: [
          {
            label: '页面名称',
            model: 'fymmc',
          },{
            label: '业务类型',
            model: 'fywlx',
          },
        ],
      }
   },
   methods: {
    closeVisible(){
      this.visibleShow = false
      this.isZdblr = false
      this.isFsfzdblr = false
      this.isBumen = false
      this.isCheckMan = false
      this.isFblbmid = false
    },
      //
      cancelLoading(){
         // let timer = setInterval((val)=>{
         //       this.spinning = false
         //       clearInterval(timer);
         // },500);
         this.spinning;
      },

      //
      handleOk(){
         this.handleSubmit()
      },

      //
      handleSubmit(e) {
            var formState = {}
            this.form.validateFields((err, values) => {
                if (!err) {
                  //console.log(values)
                    this.confirmLoading = true
                    formState = {
                        ...this.formState,
                        ...values
                    }
                    //console.log(this.formState)
                    //console.log(formState)
                    if(formState.fblgwid){
                      formState.fblgwid = formState.fblgwid.toString()
                    }
                    if(formState.fblbmid){
                      formState.fblbmid = formState.fblbmid.toString()
                    }
                    //console.log(formState)
                    if(formState.fsfcjdpzhq == '是'){
                      formState.fsfcjdpzhq = '0'
                    }
                    if(formState.fsfcjdpzhq == '否'){
                      formState.fsfcjdpzhq = '1'
                    }
                    if(formState.fsfzdblr == '是'){
                      formState.fsfzdblr = '0'
                    }
                    if(formState.fsfzdblr == '否'){
                      formState.fsfzdblr = '1'
                    }
                    if(formState.fsfzddlr == '是'){
                      formState.fsfzddlr = '0'
                    }
                    if(formState.fsfzddlr == '否'){
                      formState.fsfzddlr = '1'
                    }
                    if (formState.id) {
                      //console.log('--------editJd-------')
                      editJd(formState).then(res=>{
                           if(res.code == 200){
                              this.submittedSuccessfully = true
                              this.$message.success(res.message)
                              this.confirmLoading = false
                              this.closeVisible()
                              this.$emit('handleOk',true,this.formState.id)
                           }else{
                              this.$message.warning(res.message)
                              this.confirmLoading = false
                           }
                        })
                    } else {
                      //console.log('--------add-------')
                        add(formState).then(res=>{
                           if(res.code == 200){
                              this.$message.success(res.message)

                              this.submittedSuccessfully = true
                              this.confirmLoading = false
                              this.closeVisible()
                              this.$emit('handleOk',true,'')
                           }else{
                              this.$message.warning(res.message)
                              this.confirmLoading = false
                           }
                        })
                    }

                }
            });

      },
      // 查询当前所有部门
      getDepartData(){
        getDepart().then(res => {
          this.departList = res.result
        })
      },
      // 查询当前所有岗位
      getJobData(){
        getJob().then(res => {
          this.jobList = res.result
        })
      },
      // 查询所有的中心职员
      getZxzyDat(){
        getZxzy().then(res => {
          this.zxzyList = res.result
        })
      },
      //
      dblrChange(val){
        // this.formState.fsfzdblr = val
        if(val == '0'){
          this.isZdblr = true
          this.isBumen = false
        } else {
          this.isZdblr = false
          this.isBumen = true
        }
      },
      // 是否从结点配置获取待办人
      fsfcjdpzhqChange(val){
        // this.formState.fsfcjdpzhq = val
        //console.log('是否从结点配置获取待办人',val)
        this.dblrChange(this.formState.fsfzdblr)
        if(val == '0'){
          this.isCheckMan = true
        } else {
          this.isCheckMan = false
          this.isZdblr = false
          this.isBumen = false
        }
      },
      // 办理部门类型
      fblbmlxChange(val){
        if(val == '指定'){
          this.isFblbmid = true
        } else {
          this.isFblbmid = false
        }
      },
      // 是否指定登陆人
      fsfzddlrChange(val){
        if(val == '0'){
            this.isFsfzddlr = false
        } else {
            this.isFsfzddlr = true
        }
      },
      //
      fblgwidChange(val){
        //console.log(val)
        this.formState.fblgwid = val.toString()
        this.form.setFieldsValue({
          fblgwid: this.formState.fblgwid,
        });
      },
      // 选择人员
    checkMan(place,man){
      this.$nextTick(_ => {
        this.modaObj = {place: place,oldId:[man]}
        this.$refs.personnelList.personnelListVisible = true
			})
    },
    // 选择人员弹窗
    checkPersonnel(place,id,name){
      this.$refs.personnelList.personnelListVisible = false
      this.formState.fblr = ''
      this.formState.fblrid = ''
      this.formState.fblr = name.toString()
      this.formState.fblrid = id.toString()
      this.form.setFieldsValue({
        fblr: this.formState.fblr,
      });

      //console.log(this.formState.fblr,this.formState.fblrid)
    },
    selectTemplateChange(val){
       //console.log(val.newValue.id)
       this.formState.fymid = val.newValue.id
       this.form.setFieldsValue({
        fymid: this.formState.fymid,
      });
       //console.log(this.formState.fymid)
    },
        closePageVisible(){
            this.pageVisible = false
            this.selectTemplateKey = Date.now()
        },
   },
   computed: {},
   created() {},
   update() {
      this.cancelLoading();
   },
   mounted() {
      if(this.addEditParameter.id){
         this.formState.id = this.addEditParameter.id
      }
      this.getDepartData()
      this.getJobData()
      // this.getZxzyDat()
   },
   watch: {
      addEditParameter(newval,oldVal){
        this.spinning = true
        //console.log(newval)
        this.formState = {
          id: '',
          flcmbid: newval.flcmbid,
          fsyhjid: newval.fsyhjid,
          fsfcjdpzhq: '是',
          fsfzdblr: '否',
          fsfzddlr: '否',
          fxh: '',
        }
        this.fsfcjdpzhqChange('0')
        this.dblrChange('1')
        // //console.log(this.formState)
        if(newval.id){
            this.formState.id = newval.id
            this.formState = {
              ...this.formState,
              fblbmid: newval.fblbmid?newval.fblbmid.split(','):[],
              fblbmlx: newval.fblbmlx?newval.fblbmlx:'',
              fblfs: newval.fblfs?newval.fblfs:'',
              fblgwid: newval.fblgwid?newval.fblgwid.split(','):[],
              fblrid: newval.fblrid?newval.fblrid:'',
              fblr: newval.fblr?newval.fblr:'',
              fjdmc: newval.fjdmc?newval.fjdmc:'',
              flcmbid: newval.flcmbid?newval.flcmbid:'',
              fsfcjdpzhq: newval.fsfcjdpzhq?newval.fsfcjdpzhq:'',
              fsfzdblr: newval.fsfzdblr?newval.fsfzdblr:'',
              fsfzddlr: newval.fsfzddlr?newval.fsfzddlr:'',
              fsyhjid: newval.fsyhjid?newval.fsyhjid:'',
              fxh: newval.fxh?newval.fxh:'',
              id: newval.id,
              fymid: newval.fymid?newval.fymid:'',
            }
            this.formState.fsfcjdpzhq = Number(this.formState.fsfcjdpzhq)==0?'是':'否'
            this.formState.fsfzdblr = Number(this.formState.fsfzdblr)==0?'是':'否'
            this.formState.fsfzddlr = Number(this.formState.fsfzddlr)==0?'是':'否'

            //console.log('新-formState',this.formState)


            this.fsfcjdpzhqChange(newval.fsfcjdpzhq)
            this.fblbmlxChange(newval.fblbmlx)
            this.dblrChange(newval.fsfzdblr)
        }
        this.spinning = false
      }
   }
}
</script>

<style lang="less">
.ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .acceptance-modal .ant-modal-header{
    display: none !important;
 }
 .acceptance-modal .ant-modal-footer{
    display: none !important;
 }
 .acceptance-modal .ant-modal-content{
    height: 100vh;
    overflow: auto;
 }
 .full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
